/**
* @description:	banner图片滚动插件
* 使用方法: XOMS.banner($container, {options});
* 使用时注意指定container的高度及宽度
* @author:	yanxiaoe 
* @param {object} banner的外层窗口的jquery对象
* @param {object} {
* 	imgSrc: 需要展示的图片路径的数组
* 	urls: 与imgSrc中的图片对应的文章的url数组,需要与imgSrc中的顺序一致
* 	nav: 是事显示下方的导航按钮,默认为Y,可取值N
* 	navPostion: 默认center,可取值center left right
* 	count: 可显示的图片的最多数量,默认8
* }
* @example XOMS.banner(param, param);
*/
define(['jquery', 'XOMS'], function($, XOMS) {
	var defaultOptions = {
		imgSrc: [],
		urls: [],
		backgroundColor: '#fff',
		nav: 'Y',
		navPostion: 'center',
		interval: 6000, // 间隔时间
		animateTime: 500, // 动画时间
		count: 8 // 可显示的数量，默认8张
	};
	
	XOMS.banner = function($container, options) {
		var _options = $.extend({}, defaultOptions, options);
		
		// 设置container的样式
		$container.addClass('banner-container');
		$container.css({
			backgroundColor: _options.backgroundColor
		});
		
		var imgSrc = _options.imgSrc;
		var count = imgSrc.length;
		if(count <= 0) {
			return;
		}
		var $div = $('<div><div class="banner-nav"><ul></ul></div><div class="banner-img-container"></div></div>');
		var $ul = $div.find('ul');
		if(count > _options.count) {
			count = _options.count;
		}
		for(var i=0; i<count; i++) {
			$div.find('.banner-img-container').append('<a class="banner-a-' + i +'" href="' + _options.urls[i] + '" target="_black"><img class="banner-img-' + i + ' banner-img" src="' + imgSrc[i] + '" /></a>');
			$ul.append('<li class="banner-nav-'+ i + '" data-order="' + i + '"></li>');
		}
		
		//设置nav样式
		var showNav = _options.nav == 'Y' && count > 1 ? 'block' : 'none';
		$div.find('.banner-nav').css({
			'display': showNav
		});
		var left = $container.width() / 2 - 24 * count / 2;
		$ul.css({
			'left': left + 'px'
		});
		// 设置图片样式
		var width = $container.width();
		$div.find('.banner-img-container').css({
			width: width * 2 + 'px'
		});
		$div.find('.banner-img').css({
			width: width + 'px'
		});
		$container.html($div);
		$container.attr('data-order', 0);
		// 只有一张图片时,不用自动播放和点击事件
		if(count > 1) {
			// 添加点击事件
			var intValue = -1;
			var imgContainer = $container.find('.banner-img-container');
			var clickFn = function($this, eType) {
				imgContainer.stop();
//				var $this = $(e.target);
				var order = $this.attr('data-order'),
				preOrder = $container.attr('data-order'),
				animateWidth = width;
				// 初始化动画
				$('.banner-a-' + order).css('display', 'block');
				if(preOrder < order) {
					animateWidth = '-' + width;
				} else {
					imgContainer.css('left', '-' + width + 'px');
					animateWidth = 0;
				}
				imgContainer.animate({
					left: animateWidth + 'px'
				}, _options.animateTime, function() {
					$container.attr('data-order', order);
					imgContainer.css('left', '0px');
					$('.banner-a-' + preOrder).css('display', 'none');
				});
				$container.find('li').css({
					'background-color': 'rgb(210, 208, 208)'
				});
				$container.find('.banner-nav-' + order).css({
					'background-color': '#f60'
				});
				/*if(eType == 'mouseover') {
					clearInterval(intValue);
				}*/
			};
//			$container.on('click mouseover', 'li', function(e) {
			$container.on('click', 'li', function(e) {
				clickFn($(e.target), e.type);
			});
			// 添加自动滚动功能
			var auto = function() {
				var order = $container.attr('data-order');
				if(order == count - 1) {
					order = 0;
				} else {
					order = +order + 1;
				}
				clickFn($container.find('.banner-nav-' + order));
//				$container.find('.banner-nav-' + order).click();
			};
			
			/*$container.on('mouseout', 'li', function(e) {
				intValue = setInterval(auto, _options.interval);
			});*/
			intValue = setInterval(auto, _options.interval);
		}
	};
	
	
	return XOMS.banner;
});